import { getLayoutProps } from "@/common/layout/getProps";
import styles from "@/modules/performanceAppraise/index.module.scss";
import GlobalClasses from "@/styles/globalClasses.module.scss";
import { PageContainer } from "@ant-design/pro-layout";
import { Button, Checkbox, Image, Modal } from "antd";
import { cloneDeep } from "lodash";
import type { Key} from "react";
import { useState } from "react";
import votingPreferredStyles from "./votingPreferred.module.scss";

const VotingPreferred = () => {
  const [selected, setSelected] = useState<Key[]>([]);
  const data = Array(14).fill(0).map((t, i) => {
    return {
      id: i + 1,
      field1: "Mr.Wang",
      field2: "创新部",
      field3: "总监",
      field4: "EMBA",
      img: "http://xxxx.png",
      desc: "认真承接上级领导指派的工作，按时完成工作，完成工作的数量、质量，同时，积极与客户沟通，解决问题，提升客户满意度，为项目的后续推进奠定了坚实基础。"
    }
  })

  return (
    <PageContainer header={{
      title: ""
    }}>
      <div className={[styles.formCard, "mb-[20px]"].join(" ")}>
        <div
          className={[GlobalClasses.title, "title", 'flex', 'justify-between'].join(" ")}>
          优秀员工推荐人选
          <Button type={'primary'} onClick={() => {
            Modal.confirm({
              title: "提示",
              content: "此操作将XXX评选为评优人员，是否继续？",
              onOk(close){
                close();
              }
            })
          }}>提交</Button>
        </div>

        <div className={votingPreferredStyles.card}>
          {
            data.map(item => {
              return (
                <div className="card-item" key={item.id}>
                  <div className="header">
                    <Checkbox onChange={e => {
                      if (e.target.checked) {
                        setSelected(cloneDeep(selected.concat([item.id])))
                      } else {
                        setSelected(cloneDeep(selected.filter(s => s !== item.id)))
                      }
                    }}/>
                  </div>
                  <div className="top">
                    <div className="avatar">
                      <img src={'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'} alt=""/>
                    </div>
                    <div className="info">
                      <div className="name">{item.field1}</div>
                      <div className="bumen">{item.field2}</div>
                      <div className="zhiwei">{item.field3}</div>
                      <div className="zhicheng">技术职称：{item.field4}</div>
                    </div>
                  </div>
                  <div className="bottom">
                    <div>季度工作业绩突出介绍：</div>
                    <div className={'desc'}>{item.desc}</div>
                  </div>
                </div>
              )
            })
          }
        </div>
      </div>
    </PageContainer>
  )
}

export const getServerSideProps = getLayoutProps;
export default VotingPreferred
